<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./styles/index.css"> -->
    <link rel="stylesheet" href="styles/public.css">
    <link rel="stylesheet" href="styles/hot_brand.css">
    <link rel="stylesheet" href="styles/header.css">
    <link rel="stylesheet" href="styles/good_rec.css">
    <link rel="stylesheet" href="styles/global.css">
    <link rel="stylesheet" href="styles/footer.css">
    <link rel="stylesheet" href="styles/first_banner.css">
    <link rel="stylesheet" href="styles/fashioner.css">
    <link rel="stylesheet" href="styles/buy_help.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
</head>

<body>
    <!-- 登录界面 -->
    <div class="login-ifranmes">
        <div class="close"></div>
        <iframe frameborder="0"></iframe>
    </div>
    <!-- 购物车列表 -->
    <div class="carts-list">
        <div class="close-carts"></div>
        <div class="goods-list">
            空空如也~~~
        </div>
        <button class="clear-carts">清空购物车</button>
    </div>

    <!-- 右侧浮动 -->
    <div class="float-menu">
        <ul>
            <li><a ref=""></a></li>
            <li><a class="suggestion" href=""></a></li>
            <li><a class="up-arrow" href="#up"></a></li>
        </ul>
    </div>
    <!-- 头部 -->
    <div class="header" id="up">
        <div class="menu">
            <a href="http://www.wutuojia.com" class="logo"></a>
            <ul class="menu-nav">
                <li><a class="menu-on" href="">首页</a></li>
                <li><a href="">搭配</a></li>
                <li>
                    <a href="">商品</a>
                    <i>大厂直供</i>
                </li>
                <li><a href="">灵感</a></li>
            </ul>
            <div class="seach">
                <a href="" class="seach-btn"></a>
            </div>
        </div>
        <div class="login">
            <div class="collocation-list">
                <a href="http://www.wutuojia.com/create/" target="_blank"><i></i>
                    <h2>创建搭配</h2>
                </a>
            </div>
            <div class="login-no">
                <span class="login-in"></span>
                <i class="register-in">注册</i>
            </div>
            <div class="carts">0</div>
        </div>

    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- dataJson -->
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <ul class="menu-buttons">
            <li class="button">
                <a class="name" href="">风格</a>
                <div class="msg-board">
                    <div class="selection-box">
                        <a href="">欧式</a>
                        <a href="">田园</a>
                        <a href="">新中式</a>
                        <a href="">简约现代</a>
                        <a href="">地中海</a>
                    </div>
                    <div class="selection-box">
                        <a href="">客厅</a>
                        <a href="">卧室</a>
                        <a href="">厨房</a>
                        <a href="">餐厅</a>
                        <a href="">卫生间</a>
                    </div>
                </div>
            </li>
            <li class="button">
                <a class="name" href="">空间</a>
                <div class="msg-board">
                    <div class="selection-box">
                        <a href="">客厅</a>
                        <a href="">卧室</a>
                        <a href="">厨房</a>
                        <a href="">餐厅</a>
                        <a href="">卫生间</a>
                    </div>
                    <div class="selection-box">
                        <a href="">玄关台</a>
                        <a href="">衣柜</a>
                        <a href="">床</a>
                        <a href="">床头柜</a>
                        <a href="">茶几</a>
                    </div>
                </div>
            </li>
            <li class="button">
                <a class="name" href="">家具</a>
                <div class="msg-board">
                    <div class="selection-box">
                        <a href="">玄关台</a>
                        <a href="">衣柜</a>
                        <a href="">床</a>
                        <a href="">床头柜</a>
                        <a href="">茶几</a>
                    </div>
                    <div class="selection-box">
                        <a href="">欧式</a>
                        <a href="">田园</a>
                        <a href="">新中式</a>
                        <a href="">简约现代</a>
                        <a href="">地中海</a>
                    </div>
                </div>
            </li>
            <li class="button">
                <a class="name" href="">主题</a>
                <div class="msg-board">
                    <div class="selection-box">
                        <a href="">客厅</a>
                        <a href="">卧室</a>
                        <a href="">厨房</a>
                        <a href="">餐厅</a>
                        <a href="">卫生间</a>
                    </div>
                </div>
            </li>

        </ul>
    </div>
    <!-- 推荐商品 -->
    <div class="goods-rec">
        <div class="w1200">
            <div class="title">
                <h2></h2>
                <div class="more">
                    <a href="">更多</a>
                    <i></i>
                </div>
            </div>
            <div class="big-box">

            </div>

            <!-- dataJson -->
        </div>
    </div>
    <!--  -->
    <div class="line">
        <div class="short-line  short">
        </div>
    </div>
    <!--达人搭配-->
    <div class="fashioner">
        <div class="w1200">
            <div class="title">
                <h2></h2>
                <div class="more">
                    <a href="">更多</a>
                    <i></i>
                </div>
            </div>
            <div class="pic-box">
                <!-- dataJson -->
            </div>

            <div class="long-line">
                <img class="arrow" src="http://www.wutuojia.com/images/arrow.png" alt="">
            </div>
            <div class="user-show">
                <!-- dataJson -->
            </div>
        </div>
    </div>
    <!--  -->
    <div class="line w1200">
        <div class="short-line">

        </div>
    </div>
    <!-- 推荐灵感 -->

    <div class="inspiration-rec">
        <div class="w1200">
            <div class="title">
                <h2></h2>
                <div class="more">
                    <a href="">更多</a>
                    <i></i>
                </div>
            </div>
            <!-- dataJson -->
        </div>
    </div>
    <!--  -->
    <div class="line w1200">
        <div class="short-line">

        </div>
    </div>
    <!-- 选购指南 -->
    <div class="buy-help">
        <div class="w1200">
            <div class="title">
                <h2></h2>
                <div class="more">
                    <a href="">更多</a>
                    <i></i>
                </div>
            </div>
            <div class="boxs">
                <a class="left-box" href="">
                    <img src="http://img1.wutuojia.com/item/image/20161013/111907_697497.jpg" alt="">
                    <div class="words">
                        <h2>玻璃杯有毒吗?</h2>
                        <p>五彩缤纷的玻璃杯总是让人心动,但高温,速冻是否会析出毒素...</p>
                    </div>
                </a>
                <a class="right-box" href="">
                    <img src="http://img1.wutuojia.com/item/image/20161013/112340_631229.jpg" alt="">
                    <div class="words">
                        <h5>--滚筒洗衣机最好--</h5>
                        <h1>干净又省事</h1>
                    </div>
                </a>
                <a class="middle-box" href="">
                    <img src="http://img1.wutuojia.com/item/image/20161013/111931_710245.jpg" alt="">
                    <div class="words">
                        <h5>--仿似牛奶般丝滑--</h5>
                        <h1>学选真正蚕丝被</h1>
                    </div>
                </a>
                <a class="middle-box" href="">
                    <img src="http://img1.wutuojia.com/item/image/20161013/112254_421706.jpg" alt="">
                    <div class="words">
                        <h5>--收到请帖的时候--</h5>
                        <h1>我们该准备什么</h1>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!--  -->
    <div class="line w1200">
        <div class="short-line">

        </div>
    </div>
    <!-- 热门品牌 -->
    <div class="hot-brand">
        <div class="w1200">
            <div class="title">
                <h2></h2>
                <div class="more">
                    <a href="">更多</a>
                    <i></i>
                </div>
            </div>
            <div class="swiper-container container">
                <div class="swiper-wrapper">
                    <!-- dataJson -->
                </div>
                <div class="swiper-button-prev  prev"></div>
                <div class="swiper-button-next  next"></div>
                <div class="swiper-pagination"></div>
            </div>

        </div>
    </div>
    <!-- last one -->
    <div class="footer">
        <div class="w1200">
            <div class="footer-tag">
                <div class="tag">
                    <a href="http://www.wutuojia.com/item/">
                        <i class="f-directsupply"></i>
                        <span>大厂直供</span>
                        <p>出厂价格出口品质</p>
                    </a>
                </div>
                <div class="tag">
                    <a href="http://www.wutuojia.com/item/">
                        <i class="f-directsupply"></i>
                        <span>家居灵感</span>
                        <p>海量家居美图发现梦想的家</p>
                    </a>
                </div>
                <div class="tag last-one">
                    <a href="http://www.wutuojia.com/item/">
                        <i class="f-directsupply"></i>
                        <span>私人搭配师</span>
                        <p>资深设计师免费帮你搭</p>
                    </a>
                </div>
            </div>
            <div class="wline">
            </div>
            <div class="footer-company">
                <img src="http://www.wutuojia.com/images/wtj-logo.png" width="114" heigh="52" alt="乌托家|家居网">
                <p class="record-company">粤ICP备15037979号-1</p>
                <p>©2015~2018 wutuojia.com 广州乌托家信息科技有限公司</p>
            </div>
            <div class="link-box">
                <dl class="link">
                    <dt>关于我们</dt>
                    <dd><a href="">关于乌托家</a></dd>
                    <dd><a href="">战略合作</a></dd>
                    <dd><a href="">社会招聘</a></dd>
                </dl>
            </div>
            <div class="link-box">
                <dl class="link">
                    <dt>帮组中心</dt>
                    <dd><a href="">关于乌托家</a></dd>
                    <dd><a href="">战略合作</a></dd>
                    <dd><a href="">社会招聘</a></dd>
                </dl>
            </div>
            <div class="link-box">
                <dl class="link">
                    <dt>配送安装</dt>
                    <dd><a href="">关于乌托家</a></dd>
                    <dd><a href="">战略合作</a></dd>
                    <dd><a href="">社会招聘</a></dd>
                </dl>
            </div>
            <div class="link-box">
                <dl class="link">
                    <dt>售后保障</dt>
                    <dd><a href="">关于乌托家</a></dd>
                    <dd><a href="">战略合作</a></dd>
                    <dd><a href="">社会招聘</a></dd>
                </dl>
            </div>
            <div class="ma">
                <img src="http://www.wutuojia.com/images/qrcode.png" alt="">
                <p>关注乌托家公众号</p>
            </div>
            <div class="wline">
            </div>

            <ul class="final-haha">
                <li><a href="">友情链接:</a></li>
                <li><a href="">家居</a></li>
                <li><a href="">家居百科</a></li>
                <li><a href="">家居资讯</a></li>
                <li><a href="">家居文库</a></li>
                <li><a href="">家具品牌</a></li>
                <li><a href="">家居图片</a></li>
                <li><a href="">家具搭配</a></li>
                <li><a href="">精品家具</a></li>
                <li><a href="">软装配饰</a></li>
                <li><a href="">一美居网</a></li>
                <li><a href="">软装设计公司</a></li>
                <li><a href="">依旧东方情</a></li>
                <li><a href="">福州装修网</a></li>
                <li><a href="">家具O2O</a></li>
                <li><a href="">家具厂</a></li>
                <li><a href="">乌托家手机版</a></li>
                <div class="add-btn">

                </div>
            </ul>


        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script src="./javascript/jquery.js"></script>
    <script type="module">
        import wtj from "./javascript/index.js";
        wtj.init();

    </script>
</body>

</html>